﻿{{include file="../00_include/01_head.tpl"}}
<script type="text/javascript">var base_url = "{{""|base_url}}", edialog, ndialog;</script>
<div class='l-h-28 g-d-w  b-r-t-4 p-l-20 b-d-b-c-ddd dotum p-r'>
    <span>Home</span>
    <span class="arrow_space"></span>
    <span>Clear cache</span>

</div>
<div class="b-g-c-eee- b-d-b-c-ccc p-4">
    <div class="grid_8- d-p-b m-4 b-d-c-bbb d-0x00">
        <div class="l-h-20 p-l-8 b-0x00 c-w">Message !</div>
        <p class="t-a-j p-4 c-0x00">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid green">
        <div class="l-h-20 p-l-8" style="background:green;color:#fff">Message !</div>
        <p class="t-a-j p-4" style="color:green">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid blue">
        <div class="l-h-20 p-l-8" style="background:blue;color:#fff">Notice !</div>
        <p class="t-a-j  p-4" style="color:blue">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid red">
        <div class="l-h-20 p-l-8" style="background:red;color:#fff">Error !</div>
        <p class="t-a-j  p-4" style="color:red">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid orange">
        <div class="l-h-20 p-l-8" style="background:orange;color:#fff">Warning !</div>
        <p class="t-a-j p-4" style="color:orange">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #b81b6c">
        <div class="l-h-20 p-l-8" style="background:#b81b6c;color:#fff">Warning !</div>
        <p class="t-a-j p-4" style="color:#b81b6c">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #008A00">
        <div class="l-h-20 p-l-8" style="background:#008A00;color:#fff">Warning !</div>
        <p class="t-a-j p-4" style="color:#008A00">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #B01E00">
        <div class="l-h-20 p-l-8" style="background:#B01E00;color:#fff">Warning !</div>
        <p class="t-a-j p-4" style="color:#B01E00">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>

    <div class="grid_8- d-p-b m-4" style="border:1px solid #008299">
        <div class="l-h-20 p-l-8" style="background:#008299;color:#fff">Teal !</div>
        <p class="t-a-j p-4" style="color:#008299">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #2672EC">
        <div class="l-h-20 p-l-8" style="background:#2672EC;color:#fff">Blue !</div>
        <p class="t-a-j p-4" style="color:#2672EC">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #8C0095">
        <div class="l-h-20 p-l-8" style="background:#8C0095;color:#fff">Purble !</div>
        <p class="t-a-j p-4" style="color:#8C0095">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #5133AB">
        <div class="l-h-20 p-l-8" style="background:#5133AB;color:#fff">Dark Purple !</div>
        <p class="t-a-j p-4" style="color:#5133AB">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #AC193D">
        <div class="l-h-20 p-l-8" style="background:#AC193D;color:#fff">Red !</div>
        <p class="t-a-j p-4" style="color:#AC193D">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4" style="border:1px solid #D24726">
        <div class="l-h-20 p-l-8" style="background:#D24726;color:#fff">Orange !</div>
        <p class="t-a-j p-4" style="color:#D24726">
            Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.
        </p>
    </div>
    <div class="grid_8- d-p-b m-4 d-0x02">
        <div class="l-h-20 p-l-8 b-0x02 c-w">Sky Blue !</div>
        <div class="t-a-j p-4 c-0x02">
            Textbox<br/>
            <input class="d-0x03 h-d-0x06 h-24"/><br/>
            Select<br/>
            <select class="d-0x07 h-d-0x13"><option>Select</option><option style="padding-left:40px">Value one</option></select><br/>
            textarea<br/><textarea></textarea><br/>
            Button<br/>
            <button class="f-l b-blue m-r-4">Button</button>
            <input type="button" class="f-l b-blue m-r-4" value="Button"/>
            <input type="submit" class="f-l b-blue m-r-4" value="blue"/>
            <button class="f-l b-skyblue h-b-green m-r-4">skyblue</button>
            <button class="f-l b-orange m-r-4">orange</button>
            <button class="f-l b-red m-r-4">red</button>
            <button class="f-l b-darkpurple m-r-4">darkpurple</button>
            <button class="f-l b-purple m-r-4">purple</button>
            <button class="f-l b-teal h-b-0x01 m-r-4" onclick="ErrorMsg('Abc')">teal</button>
            <button class="f-l b-reda h-b-0x02 m-r-4" onclick="NoticeMsg('Abc')">reda</button>
            <button class="f-l b-green h-b-0x03 a-b-0x10 m-r-4">green</button>
            <button class="f-l b-0x00 h-b-0x00 a-b-0x03 m-r-4">Gray</button>
            <div class="f-l button b-0x00 h-b-0x00 a-b-0x03 m-r-4">Div</div>
            
        </div>
    </div>
    <div id="dialog1">
            <fieldset class="d-0x06 p-8">
                <legend class="c-0x03 p-4">Galleries generator</legend>
                <form id="testForm" name="testForm" action="./">
                    <table class="cell-padding-2">
                        <tr>
                            <td>Title</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input id="userInput" class="d-0x01 h-d-0x01 wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x01 d-p-b l-h-24 t-a-c c-w">N</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td><span class="p-l-40">Desc</span></td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input id="realNameInput" class="d-0x02 h-d-0x02 wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24  v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x02 d-p-b l-h-24 t-a-c c-w">N</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input id="passwordInput" class="d-0x13 h-d-0x13 wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24  v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x13 d-p-b l-h-24 t-a-c c-w">G</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">Confirm</td>
                            <td><input id="passwordConfirmInput" class="d-0xdd  w-240 h-24"/></td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input id="emailInput" class="d-0x12 h-d-0x12 wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x12 d-p-b l-h-24 t-a-c c-w">E</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">Skype</td>
                            <td><input class="d-0xdd w-240 h-24"/></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input class="d-0xdd h-d-0xdd wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x10 d-p-b l-h-24 t-a-c c-w edit-icon"></div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">Birth</td>
                            <td><div id="birthInput"></div></td>
                        </tr>
                        <tr>
                            <td>Like</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input class="d-0xdd h-d-0xdd wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x08 d-p-b l-h-24 t-a-c c-w">L</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">Zipcode</td>
                            <td><input id="zipInput" class="d-0x07 h-d-0x07 w-240 h-24"/></td>
                        </tr>
                        <tr>
                            <td>Code</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input class="d-0xdd h-d-0xdd wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x06 d-p-b l-h-24 t-a-c c-w">C</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">Phone</td>
                            <td><input id="phoneInput" class="d-0x05 h-d-0x05 w-240 h-24"/></td>
                        </tr>
                        <tr>
                            <td>Country</td>
                            <td class="w-240">
                                <table class="cell-padding-0 w-240">
                                    <tr>
                                        <td>
                                            <input class="d-0x06 h-d-0x06 wi h-24" style="border-right:none"/>
                                        </td>
                                        <td class="w-24 v-a-t">	
                                            <div class=" w-24 h-24 d-b b-0x06 d-p-b l-h-24 t-a-c c-w">Y</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td  class="p-l-20">SSN</td>
                            <td><input id="ssnInput" class="d-0x05 h-d-0x05 w-240 h-24"/></td>
                        </tr>
                        <tr>
                            <td>Học vấn</td><td><select class="d-0x07 h-d-0x13 wi f-l"><option>Select</option><option style="padding-left:40px">Value one</option></select></td>
                            <td class="p-l-20">Tỉnh</td><td>
                                <div class="p-r">
                                    <input class="d-0x06 h-d-0x06 w-240 h-24"/>
                                    <div class="p-a w-24 h-24 d-b b-0x06 t-0 r-0 setting-icon"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Note</td>
                            <td colspan="3">
                                <textarea class="d-0x04 h-d-0x04 wi"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="3">
                                <textarea id="tinymce_editor" class="d-0x04 h-d-0x04 wi"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="l-h-24">Hình ảnh</label></td>
                            <td colspan="3">
                                <table class="cell-padding-0 w-i">
                                    <tr>
                                        <td>
                                            <input id="txtGalleriaImage" name="txtGalleriaImage" class="wi h-24"/>
                                        </td>
                                        <td class="v-a-t p-l-8 w-24" style="padding-left: 4px">	
                                            <button type="button" class="classic-button" onclick="BrowseServer('#txtGalleriaImage')">Choose</button>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="l-h-24">Tiêu đề</label></td>
                            <td colspan="3">
                                <input class="wi h-24"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="l-h-24"></label></td>
                            <td colspan="3">
                                <button type="button" class="classic-button" onclick="galleria_add()">Add</button>
                            </td>
                        </tr>
                    </table>
                    <div class="p-t-2">
                        <button type="submit" class="b-reda h-b-0x02 f-l w-a"><span>A</span>Register</button>
                        <div class="button b-0x00 h-b-0x00 a-b-0x03 f-l m-l-4 c-s-p" onclick="randommsg()">Reset</div>
                    </div>
                    <div class="clear"></div>
                    <div id="box_preview_galleria" class="p-r w-i">
                    </div>
                </form>
            </fieldset>
    </div>
    <style type="text/css"> 
        .jqx-validator-hint{height:16px;line-height:16px}
        #testForm table td{vertical-align: top;line-height: 16px}
    </style>
    <script type="text/javascript">
    function randommsg() {
        var type = Math.floor((Math.random() * 15));
        Msg('Whether you\'re new to XML or already an advanced user, the user-friendly views and powerful entry helpers.', 'More Examples', '0x' + (type < 10 ? '0' + type : type));
    }
    $(document).ready(function() {
        addEditorContent('tinymce_editor');
        Msg('Sets or gets the duration of the animation used for showing/hiding the hints.', 'animationDuration', '0x01');
        var theme = 'metro';
//$("#register").jqxExpander({ toggleMode: 'none', width: '350px', showArrow: false, theme: theme });
//$('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
//$('#acceptInput').jqxCheckBox({ width: 130, theme: theme });
//$('#sendButton').on('click', function () {
//    $('#testForm').jqxValidator('validate');
//});
        $("#ssnInput").jqxMaskedInput({mask: '###-##-####', width: 236, height: 20, theme: theme});
        $("#phoneInput").jqxMaskedInput({mask: '(###)###-####', width: 236, height: 20, theme: theme});
        $("#zipInput").jqxMaskedInput({mask: '###-##-####', width: 236, height: 20, theme: theme});
//$('.text-input').jqxInput({ theme: theme });
        var date = new Date();
        date.setFullYear(2000, 0, 1);
        $('#birthInput').jqxDateTimeInput({theme: theme, width: 240, height: 24, value: date});
// initialize validator.
        $('#testForm').jqxValidator({
            hintType: 'label',
            animationDuration: 0,
            rules: [
                {input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required'},
                {input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12'},
                {input: '#realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required'},
                {input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber'},
                {input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12'},
                {input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function(input, commit) {
                        var date = $('#birthInput').jqxDateTimeInput('value');
                        var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2012;
// call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                        return result;
                    }
                },
                {input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required'},
                {input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12'},
                {input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required'},
                {input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function(input, commit) {
// call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                        if (input.val() === $('#passwordInput').val()) {
                            return true;
                        }
                        return false;
                    }
                },
                {input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required'},
                {input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'},
                {input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn'},
                {input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone'},
                {input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode'}], theme: theme
        });
    });
    </script>
    <div class="clear"></div>
    <style>
        .x11{width: 80px;height: 80px}
        .x12{width: 80px;height: 164px}
        .x21{width: 164px;height: 80px}
        .x22{width: 164px;height: 164px}
    </style>
    <div id="" style="">
    <div id="masory1" class="p-r">
        {{for $i=0 to 32*4}}
            {{$v=rand(1,8)}}
            {{$h=rand(1,8)}}
            
            <div  style="
                 display: inline-block;position: absolute; 
                 background: rgb({{rand(0,255)}},{{rand(0,255)}},{{rand(0,255)}})" 
                 class="p-r item x{{if $v<=4}}2{{else}}1{{/if}}{{if $v<=4 and $h<=3}}2{{else}}1{{/if}}"
                  {{if $v<=4}}data-ss-colspan='2'{{/if}}
                 >
            
        </div>
        {{/for}}
        <script type="text/javascript" src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
        
        <script>
            $(document).ready(function(){
                $("#masory1").shapeshift({
                    minColumns: 3,
                    enableDrag:false,
                    enableCrossDrop:false,
                    enableResize: true,
                    enableTrash: false,
                    gutterX: 4,
                    gutterY: 4,
                    paddingX: 4,
                    paddingY: 4
                });
                {{*$("#dialog1").dialog({ 
                            //bgiframe: true,
                    position: 'center',
                    width: $(window).width()-8,//960,
                    height: $(window).height()-8,
                    title: 'Galieria generator',
                    modal: true,resizable:false,
                    open : function(event, ui) { 
                        $(event.target).dialog('widget')
                        .css({position: 'fixed'})
                        .position({my: 'center', at: 'center', of: window});
                    },
                    buttons: { "Close": function() { $(this).dialog("destroy"); }}
                });*}}
            });
            function galleria_add(){
                var w = Math.floor(Math.random() * (2)) + 1;
                var h = Math.floor(Math.random() * (2)) + 1;
                var r = Math.floor(Math.random() * (255)) ;
                var g = Math.floor(Math.random() * (255)) ;
                var b = Math.floor(Math.random() * (255)) ;
                var i = Math.floor(Math.random() * (58)) +1 ;
                if(w!=2) h=1;
                var img =$("<img/>") 
                    .attr("src", 'http://localhost/0x6A/0x4D/0x1A/0x2A/'+i+'.jpg')
                    .load(function() {
                        var pic_real_width = this.width;   
                        var pic_real_height = this.height; 
                        var m=80;
                        if(w==2 || h==2){
                            m=164;
                        }
                        
                        
                        if(pic_real_width<m || pic_real_height<m){
                            console.log(m);
                            if(pic_real_width<m){
                                ra=m/pic_real_width;
                                pic_real_width*=ra;
                                pic_real_height*=ra;
                                console.log('<');
                            }
                            if(pic_real_height<m){
                                ra=m/pic_real_height;
                                pic_real_width*=ra;
                                pic_real_height*=ra;
                                console.log('<');
                            }else{
                                ra=m/pic_real_height;
                                pic_real_width/=ra;
                                pic_real_height/=ra;
                                console.log('>');
                            }
                        }else{
                           {{*if(pic_real_width/m<pic_real_height/m){
                               ra=pic_real_width/m;
                           }else{
                               ra=pic_real_height/m;
                           }
                           pic_real_width/=ra;
                           pic_real_height/=ra;*}}
                        }
                        this.width=pic_real_width;
                        //this.height=$(this).parent().height();
                    });
                var div=$('<div  style="\
                 display: inline-block;position: absolute; \
                 background: rgb('+r+','+g+','+b+')" \
                 class="p-r o-v-f-h item x'+w+h+'"\
                 '+((w==2)?' data-ss-colspan="2"':'')+'\
                 ></div>');
                 div.append(img);
                
                $("#box_preview_galleria").append(div);
                 $("#box_preview_galleria").shapeshift({
                    minColumns: 2,
                    enableDrag:false,
                    enableCrossDrop:false,
                    enableResize: true,
                    enableTrash: false,
                    gutterX: 4,
                    gutterY: 4,
                    paddingX: 4,
                    paddingY: 4
                });
            }
        </script>
        
    </div>
        <div class="clear"></div>
    </div>
    <div class="p-r p-40">
        Thông tin cache.<br/>
        Cache time out : 24h.<br/>
        Bao gồm tất cả các trang frontend.<br/>
        &check; Trang chủ.<br/>
        &check; Giới thiệu.<br/>
        &check; Dịch vụ.<br/>
        &check; Chi tiết dịch vụ.<br/>
        &check; Dự án.<br/>
        &check; Chi tiết dự án.<br/>
        &check; Liên hệ.<br/>
        &check; Tin tức.<br/>
        &check; Chi tiết tin tức.<br/>
        &check; Các trang nội dung.<br/>
        <br/>
        <a class="a" target="integration_asynchronous" href="/excution/clearcache">Clean caches</a><br/>
        <div class="clear"></div>
    </div>
</div>
{{include file="../00_include/02_foot.tpl"}}
